<template>
  <div class="home">
    <nav class="nav">
      <div class="container">
        <h1 class="logo"><RouterLink to="/">海天文录</RouterLink></h1>
        <ul ref="navList">
          <li><RouterLink  to="/articles">首页</RouterLink></li>
          <li><RouterLink to="/toolView">妙妙工具箱</RouterLink></li>
          <li><RouterLink to="/chat">文言一心</RouterLink></li>
        </ul>
        <div class="user-area">
        <el-dropdown>
          <span class="el-dropdown-link">
            <div class="userInfo-area">
              <img :src="avatar">
              <p>{{ nickName }}</p>
            </div>
              
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><RouterLink class="link-text" to="/personal">个人中心</RouterLink></el-dropdown-item>
            <el-dropdown-item><RouterLink class="link-text" to="/#">待完成</RouterLink></el-dropdown-item>
            <el-dropdown-item ><RouterLink class="link-text" to="/articleEditor">文章编辑</RouterLink></el-dropdown-item>
            <el-dropdown-item divided ><RouterLink class="link-text" to="/login">退出登录</RouterLink></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      </div>
    </nav>


    <div class="body-content">
      <div class="content-area">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import {getBaseUserInfo} from '@/api/userInfo'
export default {
  data:function(){
    return {
      nickName:String,
      avatar:String
    }
  },
  methods:{
    
  },
  
  created(){
    if (this.$store.state.username == '')
      this.$router.push('/login')
    else{
      getBaseUserInfo().then(res=>{
        this.nickName = res.data.nickName
        this.avatar = res.data.avatar
        this.$store.commit('setNickName',this.nickName)
        this.$store.commit('setAvatar',this.avatar)
      })
    }
  },
}


</script>

<style scoped>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');

  .link-text{
    color: inherit;
    text-align: center;
    text-decoration: none;
    text-decoration-line: none;
    font-size: large;
  }

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.nav {
  position: fixed;
  background-color: #0084ff;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
  display: block;
  width: 100%;
  height: 12vh;
}

.nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  transition: all 0.3s ease-in-out;
}

.nav ul {
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 15px;
  transition: all 0.3s ease-in-out;
}

.nav.active {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav.active a {
  color: #000;
}

.nav.active .container {
  padding: 10px 0;
}

.nav a.current,
.nav a:hover {
  color: #c0392b;
  font-weight: bold;
}
  
  .body-content{
    position: relative;
    background: url("https://images.pexels.com/photos/18021426/pexels-photo-18021426.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2") no-repeat;

    background-size:100%;
    background-position: center center;
    top: 72px;
    display: flex;
    display: block;
    width: 100%;
    overflow: hidden;
    float: left;
    margin: 0;
  }
  .logo>img{
    width: 60px;
    width: 60px;
  } 
  .content-area{
    float: left;
    height: auto;
    height: 88vh;
    width: 100%;
  }
.userInfo-area{
  align-items: center;
}
  .userInfo-area>img{
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    display: block;
  }

</style>